<template>
	<view class="page">
		<view class="uni-margin-wrap">
			<view class="logobox">
				<image class="logo" :src="venue.venueLogo"></image>
				<text>{{venue.venueName}}</text>
			</view>

			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
				<swiper-item v-for="(p, index) in venue.venuePicArr" :key="index">
					<view class="swiper-item">
						<image mode="aspectFill" :src="p"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="infoArea">
			<view class="contentbox">
				<view class="name">
					{{ venue.venueName }}
					<text @click="open">详情</text>
				</view>
				<view class="typetag">
					<text v-for="item in venue.projectList" :key="item.id">{{item.projectName}}</text>
				</view>

				<view>
					<!-- <text v-if>营业中</text> -->
					<!-- <text v-else>营业</text> -->
					<text>营业时间</text>

					{{venue.startBus}} — {{venue.endBus}}
				</view>
				
				<view class="n9" @click="makeCall">
					场馆电话：{{ venue.venueTelno }}
					<image style="position: relative;top: 18rpx;" class="phoneIcon" src="/static/phone.png"></image>
				</view>
				
				<view class="fwtag">
					<text v-if="venue.parkFlag==1">停车场</text>
					<text v-if="venue.individualTouristFlag==1">散客</text>
					<text v-if="venue.showerFlag==1">淋浴</text>
					<text v-if="venue.wifiFlag==1">WiFi</text>
					<text v-if="venue.marketFlag==1">超市</text>
				</view>

				<view class="mapshow" @click="gogo">
					<map class="map" id="map" ref="map" :scale="scale" :longitude="longitude" :latitude="latitude"
						layer-style="1"></map>

					<image class="bg" src="/static/ditu@2x.png"></image>

					<view class="addressBox">
						<view class="adtext">
							<text>{{ venue.venueAddress }}</text>
							<image class="goicon" src="/static/navigation.png"></image>

						</view>
					</view>
				</view>
			</view>
			<view class="contentbox" v-if="venue.notice">
				<view class="t">场馆公告</view>
				<rich-text class="richText" :nodes="venue.notice"></rich-text>
			</view>
			<view class="contentbox">
				<view class="content">
					<uni-grid :column="4" :highlight="true" :showBorder="false">
						<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
							<view class="grid-item-box" @click="goItem(item)">
								<image :src="app.globalData.fileUrl + item.partLogo" class="image" mode="aspectFill" />
								<text class="text">{{ item.name }}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
		</view>

		<!-- 底部浮动窗口 -->
		<uni-popup ref="popup" background-color="#fff" class="popupMation" type="bottom">
			<view class="popup-content singlePop">
				<view class="n0">{{ venue.venueName }}</view>
				<view class="n9">营业时间：{{ venue.startBus}} - {{venue.endBus}}</view>

				<view>
					<view class="n0">场馆设施</view>
					<view class="ssShow">
						<view v-if="venue.trainFlag==1">
							<image src="/static/cg_btn01.png"></image>
							培训
						</view>
						<view v-if="venue.wifiFlag==1">
							<image src="/static/cg_btn02.png"></image>
							Wi-Fi
						</view>
						<view v-if="venue.marketFlag==1">
							<image src="/static/cg_btn03.png"></image>
							超市
						</view>
						<view v-if="venue.trainFlag==1">
							<image src="/static/cg_btn04.png"></image>
							停车
						</view>
						<view v-if="venue.memberCardFlag==1">
							<image src="/static/cg_btn05.png"></image>
							会员卡
						</view>
						<view v-if="venue.invoiceFlag==1">
							<image src="/static/cg_btn06.png"></image>
							发票
						</view>
						<view v-if="venue.showerFlag==1">
							<image src="/static/cg_btn07.png"></image>
							淋浴
						</view>
						<view v-if="venue.trainFlag==1">
							<image src="/static/cg_btn08.png"></image>
							散客服务
						</view>
					</view>
				</view>
				<view v-if="venue.introdution">
					<view class="n0">场馆介绍</view>
					<view class="content" v-html="venue.introdution">
					</view>
				</view>
				<view v-if="venue.venuePicArr">
					<view class="n0">场馆图片</view>
					<view class="venuePics" @click="clickImg">
						<image v-for="(p,index) in venue.venuePicArr" mode="aspectFill" :key="index" :src="p">

						</image>
						<text>场馆（{{venue.venuePicArr.length}}）</text>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup class="popYanZhengBox" ref="popYanZheng" type="center">
			<view class="popup-content">
				<view class="t">温馨提示</view>
				<view class="p">该微信未绑定系统内手机号，绑定手机号后正常使用。</view>
				<button class="start" type="default" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber">绑定手机号</button>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import * as api from '@/common/api.js';
	import * as loginServer from '@/common/login.js';
	import {
		getWxUser,
		getWxUserPhone
	} from '@/common/login.js';
	import {
		onLoad,onShow,
		onReady,
		onShareAppMessage,
		onShareTimeline,onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {
		ref,
		getCurrentInstance
	} from 'vue';


	const {
		proxy
	} = getCurrentInstance()
	const app = getApp();

	const projectList = ref([]);
	const venue = ref({});
	const pickList = ref([]);
	const pics = ref([]);
	const index = ref(0);
	const popup = ref(null);
	const popYanZheng = ref(null);

	const map = ref(null);
	const scale = ref(14);
	const latitude = ref('31.547158');
	const longitude = ref('120.305961');
	const agree = ref(true);
	const loading = ref(false);
	const interval = ref('');
	const duration = ref('');
	const indicatorDots = ref(true);
	const autoplay = ref(false);
	const newModel = ref({});
	let proId;
	let goPath;
	const svId = ref(null);
	const list = ref([]);
	onShow(()=>{
		if (app.globalData.isLogin) {
			init();
		} else {
			app.firstLoadCallback = () => {
				init();
			};
		}
	})
	onLoad(option => {
		if (option.scene) {
			proId = decodeURIComponent(option.scene);
		} else {
			proId = option.proId;
		}

		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});


	});
	onReady(() => {
		proxy._mapContext = uni.createMapContext("map", this)
	})

	onShareAppMessage(() => {
		return {
			title: venue.value.venueName,
			// path: '/pages/index/singleProject?&proId=' + proId
			// imageUrl: app.globalData.baseUrl + project.value.proPic
		};
	});
	onShareTimeline(() => {
		return {
			title: venue.value.venueName,
			// path: '/pages/index/singleProject?&proId=' + proId
			// imageUrl: app.globalData.baseUrl + project.value.proPic
		};
	});
	let currUser
	function checkUserPhone(path) {
		currUser = uni.getStorageSync('currUser')
		if(!currUser){
			loginServer.pcLogin().then(()=>{
				currUser = uni.getStorageSync('currUser')
				if (currUser.phonenumber) {
					debugger
						return true
					} else {
						popYanZheng.value.open()
						goPath = path
						return false;
					}
			});
		} else {
			if (currUser.phonenumber) {
				return true
			} else {
				popYanZheng.value.open()
				goPath = path
				return false;
			}
		}
	}

	function decryptPhoneNumber(res) {
		// console.log(res)
		loading.value = true
		if (res.detail.errMsg.indexOf('ok') > -1) {
			getWxUserPhone(res.detail).then((data) => {
				console.log(data)
				popYanZheng.value.close()
				uni.redirectTo({
					url: goPath
				})
			}).finally(() => {
				loading.value = false
			});
		} else {
			loading.value = false
		}
	}

	function clickImg() {
		uni.previewImage({
			urls: venue.value.venuePicArr,
			// current: 0,
			success: function(res) {
				console.log('success', res)
			},
			fail: function(res) {
				console.log('fail', res)
			},
			complete: function(res) {
				console.log('complete', res)
			}
		})
	}


	function goCenter() {
		let path = '/pages/usercenter/usercenter';
		if (checkUserPhone(path)) {
			uni.navigateTo({
				url: path
			});
		}
	}

	function popupClose() {
		popup.value.close();
	}

	function init() {
		venue.value = app.globalData.venue
		latitude.value = app.globalData.venue.latitude
		longitude.value = app.globalData.venue.longitude
		// 修改页头标题
		uni.setNavigationBarTitle({
			title: venue.value.venueName
		});
		list.value = JSON.parse(venue.value.miniappIconConfig)
	}

	function open() {
		popup.value.open();
	}

	function makeCall() {
		uni.makePhoneCall({
			phoneNumber: venue.value.venueTelno
		});
	}

	function gogo() {
		//拉起导航软件
		proxy._mapContext.openMapApp({
			latitude: parseFloat(latitude.value),
			longitude: parseFloat(longitude.value),
			destination: venue.value.venueAddress, //目标地址详情
			success() {
				console.log('success');
			},
			fail() {
				console.log('fail');
				uni.showToast({
					title: '请安装导航软件',
					icon: 'none',
					duration: 2000
				});
			},
			complete() {
				console.log('complete');
			}
		});
	}

	function closeMaptypeList() {
		this.showH5maptype = false;
	}

	function goItem(item) {
		if(item.name == '赛事'){
			item.path = '/pages_match/match/index'
		}
		if (item.path) {
			let path = item.path
			if (checkUserPhone(path)) {
				uni.navigateTo({
					url: item.path
				});
			}
		}else{
			uni.showToast({
				title: `暂未开放`,
				icon: 'none'
			});
		}

	}
</script>
<style scope lang="scss">
	.singlePop{ max-height: 60vh;overflow: auto;}
	.map {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		opacity: 0;
	}

	.venuePics {
		position: relative;
		width: 680rpx;
		height: 370rpx;
		border-radius: 15rpx;
		overflow: hidden;

		image {
			width: 680rpx;
			position: absolute;
			height: 370rpx;
		}

		text {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}

	.popYanZhengBox {
		text-align: center;

		.popup-content {
			width: 550rpx;
			height: 450rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 15rpx;
		}

		.t {
			font-weight: 500;
			font-size: 34rpx;
			color: #7B7F83;
		}

		.p {
			line-height: 1.8;
			font-size: 30rpx;
			color: #1A1A1A;
			margin-top: 50rpx;
		}

		button {
			width: 268rpx;
			height: 80rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			border: none;
			background: linear-gradient(270deg, #54E1B9, #00CAA6);
			border-radius: 40rpx;
			margin-top: 60rpx;
		}
	}

	.dis {
		color: #b3b3b3;
		border: #fff;
	}
</style>
